// tailwind.config.cjs
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,ts,js,jsx,tsx}" // 确保包含 .vue 和 .ts 文件
  ],
  theme: {
    extend: {
      spacing: {
        // 自定义 spacing，类名为 p-128 / m-144 等
        128: "32rem",
        144: "36rem"
      },
      fontSize: {
        // 自定义 font-size -> class 为 text-fluid-lg
        "fluid-lg": "clamp(1.25rem, 2vw, 2rem)"
      },
      colors: {
        // 自定义 brand 颜色 -> bg-brand-500 / text-brand-700
        brand: {
          50: "#f5f9ff",
          100: "#e6f0ff",
          500: "#2563eb",
          700: "#1f4bb8"
        }
      }
    }
  },

  // 如果你在模板中使用动态 class（例如 `:class="'p-' + size"`），Tailwind 无法静态检测到它们，
  // 可以通过 safelist 强制保留这些类
  safelist: [
    "p-128",
    "p-144",
    "bg-brand-500",
    "text-fluid-lg"
    // 或用正则：/^p-(?:128|144)$/
  ],

  plugins: []
};
